<template>
  <!-- 最外层定义一个全局类 -->
  <div class="mod-add">
    <el-card header="新增员工">
      <el-form
        :model="dataForm"
        :rules="dataRule"
        v-loading="dataFormLoading"
        ref="dataFormRef"
        @keyup.enter.native="dataFormSubmit()"
        label-width="80px"
      >
        <el-card class="article-card">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item label="工号" prop="userId">
                <el-input style="width:220px;" v-model="dataForm.userId" placeholder="请输入工号"></el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item label="入职时间" prop="createTime">
                <el-date-picker v-model="dataForm.createTime" placeholder="请输入入职时间"></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item label="用户名" prop="userName">
                <el-input style="width:220px;" v-model="dataForm.userName" placeholder="请输入用户名"></el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item label="邮箱" prop="email">
                <el-input style="width:220px;" v-model="dataForm.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item label="手机号" prop="mobile">
                <el-input style="width:220px;" v-model="dataForm.mobile" placeholder="请输入手机号"></el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item label="生日" prop="birthday">
                <el-date-picker v-model="dataForm.birthday" placeholder="请输入入职时间"></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item label="部门" prop="deptId">
                <el-cascader :options="departmentOptions" v-model="dataForm.deptId"></el-cascader>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item label="评分" prop="rate">
                <el-input-number v-model="dataForm.rate"></el-input-number>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item label="角色" prop="roleIdList">
                <el-select v-model="dataForm.roleIdList" multiple collapse-tags>
                  <el-option
                    v-for="item in roleOption"
                    :key="item.id"
                    :value="item.id"
                    :label="item.value"
                  >{{item.value}}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="课程" prop="courseList">
                <el-transfer v-model="dataForm.courseList" :data="courseOptionList"></el-transfer>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="照片" prop="headerImage">
                <el-upload
                  action="https://www.easy-mock.com/mock/5c1faaee6139c6073f40ec3b/raiseinfo-frontend/example/upload"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :on-success="handleOnSuccess"
                  :on-error="handleOnError"
                  :on-progress="handleOnProgress"
                  :file-list="fileList"
                  class="headerImage"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt>
                </el-dialog>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="article-card" body-style="text-align:center;">
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </el-card>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import validator from '@/utils/validator'
export default {

  data () {
    return {
      dataRule: {
        userId: [
          { required: true, message: '员工编号不能为空', trigger: 'blur' },
          { validator: validator.validateUserIdUnique, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮件地址不能为空', trigger: 'blur' },
          { validator: validator.validateEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { validator: validator.validateMobile, trigger: 'blur' }
        ]
      },

      // 表单数据
      dataForm: {},
      // 表单载入动画控制
      dataFormLoading: false,

      // 页面初始化的时候需要准备的数据
      departmentOptions: [],
      roleOption: [],
      courseOptionList: [],

      // 上传图片组件的属性
      fileList: [
        {
          name: null,
          url: null
        }
      ],
      dialogImageUrl: '',
      dialogVisible: false

    }
  },
  activated () {
    let id = this.$router.history.current.params.id
    console.log('传入的参数：', id)
    if (id != null) {
      // 传入参数为修改，没有参数为添加
      this.init(id)
    }
  },
  created () {

  },
  mounted () {
    // this.$http.request('sys/test/list').then(res => {
    //   console.log(res)
    // })
  },
  methods: {

    init (id) {
      this.dataFormLoading = true
      this.service.getDepartmentOptions().then(res => {
        this.departmentOptions = res.data
      })
      this.service.getRoleOption().then(res => {
        this.roleOption = res.data
      })
      this.service.getCourseOptionList().then(res => {
        this.courseOptionList = res.data
      })
      this.service.getExampleGridInfo(id).then(res => {
        this.dataForm = res.data
        this.fileList[0].name = '头像'
        this.fileList[0].url = res.data.headerImage
      }).then(() => {
        this.dataFormLoading = false
      })
    },

    /**
     * 表单操作
     */
    resetForm () {
      console.log('重置表单')
      this.$refs.dataForm.resetFields()
    },
    dataFormSubmit () {
      // console.log('提交表单')
      this.$refs['dataFormRef'].validate((valid, object) => {
        if (valid) {
          console.log('可以提交')
          console.log(object)
        } else {
          console.log('不可以提交')
          console.log(object)
        }
      })
    },
    /**
     * 上传图片支持函数
     */
    // 删除图片前的操作
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 执行删除操作
    handleRemove (file, fileList) {
      console.log('文件：', file)
      console.log('文件列表：', fileList)
    },
    // 预览图片操作
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 上传成功后的操作
    handleOnSuccess (response, file, fileList) {
      console.log('上传成功后响应：', response)
      console.log('文件：', file)
      console.log('文件列表：', fileList)
    },
    // 上传失败的操作
    handleOnError (err, file, fileList) {
      console.log('上传失败的响应：', err)
      console.log('文件：', file)
      console.log('文件列表：', fileList)
    },
    // 执行上传的操作
    handleOnProgress (event, file, fileList) {
      console.log('执行上传的响应：', event)
      console.log('文件：', file)
      console.log('文件列表：', fileList)
    }
  }
}
</script>
<style>
.article-card {
  margin-bottom: 10px;
}
.image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.headerImage .el-upload-list--picture-card .el-upload-list__item {
  height: auto !important;
}
</style>
